<template>
  <div class="conWidth">
    <Navigation :id="2"/>
    <div class="swiper-container">
      <ul class="project-box flexbox swiper-wrapper">
        <li class="swiper-slide" v-for="(item, index) in project" :key="index" @click="toLink(item)">
          <h3 v-if="index % 2 === 0">{{item.projectName}}</h3>
          <img :src="imgHost + item.projectImg" alt="" v-if="item.projectImg" />
          <h3 v-if="index % 2 != 0">{{item.projectName}}</h3>
        </li>
      </ul>
    </div>
    <Footer class="footer" />
  </div>
</template>
<script>
import Navigation from "@/components/Navigation/index.vue";
import Footer from "@/components/footer/footer.vue";
import Swiper from "swiper";
import "swiper/dist/css/swiper.css";
export default {
  components: { Navigation, Footer },
  name: "HelloWorld",
  data() {
    return {
      msg: "Welcome to Your Vue.js App",
      project:[]
    };
  },
  created() {
    this.query();
  },
  mounted() {
    new Swiper(".swiper-container", {
        slidesPerView: 3, // 显示的数量
        spaceBetween: 30, // 每张的间距
        freeModeMomentum:false,
    });
  },
  methods:{
    query() {
       this.$load.show();
       this.$http
        .get("resume/getResume", { params: { userId: 1 } }).then(res => {
          this.$load.close();
          this.project = res.data.project;
        })
    },
    toLink({projectName, projectLink}) {
      if (!projectLink) return;
        this.$confirm(`是否跳转 ${projectName} ?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          window.open(`${projectLink}`);
        })
      
    }
  }
};
</script>
<style scoped lang="less">
.conWidth {
  height: 100%;
}
.project-box {
  padding-top: 23%;
  margin-bottom: 50px;
  li {
    width: 30%;
    cursor: pointer;
    h3 {
      border-left: 4px solid #000;
      padding-left: 20px;
      margin: 10px 0;
    }
    img {
      width: 100%;
    }
  }
}
.footer {
  position: absolute;
  bottom: 0;
}
</style>